<script>
import shop from "/src/js/shop";
import BoxInI18nParamDialog from "/src/views/manage/shop/goods/components/BoxInI18nParamDialog.vue";
import BoxInI18nTextDialog from "/src/views/manage/shop/goods/components/BoxInI18nTextDialog.vue";

export default {
  components: {BoxInI18nTextDialog, BoxInI18nParamDialog},
  data() {
    return {
      shop,
      visible: [],
      show: false,
      requestParam: {
        bodyJson: [
          {
            "type": "fileIdOfVideo",
            "value": 592191893413893
          },
          {
            "type": "fileIdOfImg",
            "value": 592191893413893
          },
        ],

        params: [
          {
            "paramId": 1,
            "value": 592191893413893
          },
          {
            "paramId": 2,
            "value": 592191893413893
          },
        ],

        attrJson: [
          {
            "attrId": 1,
            "value": 592191893413893
          },
          {
            "attrId": 2,
            "value": 592191893413893
          },
        ],


        detailJson: [
          {
            type: "fileIdOfImg",
            value: 592191893413893
          },
          {
            type: "fileIdOfVideo",
            value: 592191893413893
          }
        ],
        "bodyJsonStr": null,
        "costPrice": null,
        "detailJsonStr": null,
        "fileIdOfMain": 592191893413893,
        "gmtCreate": null,
        "gmtModified": null,
        "id": null,
        "isRecommend": null,
        "name": "KY016-3 石子生产线 轮胎式移动砂石线设备 矿山专用车载式破碎站",
        "price": null,
        "priority": null,
        salesVolumeShowNumber: null,
        stockNumber: null,
        "typeId": null
      },
      typeIds: [],
      typeList: [],
      paramList: [],
      paramMap: [],
      attrList: [],
      attrMap: {},
      // 属性可选项
      attrSelect: [
        {
          attrId: 1,
          selects: ["1", "2", "3"]
        }
      ],
      isInit: false,
      texts:[]
    }
  },
  created() {
    this.getTextsByGoodsId();
  },
  mounted() {
    this.visible = [];
    // 初始化visible
    for (let i = 0; i < this.requestParam.bodyJson.length; i++) {
      this.visible.push(false);
    }
  },
  watch: {
  },
  methods: {
    open(item) {
      this.isInit = false;
      if (item) {
        if (item.typeId) {
          if (item.type?.parentId) {
            this.typeIds = [item.type?.parentId, item.typeId];
          } else {
            this.typeIds = [item.typeId];
          }
        } else {
          this.typeIds = [];
        }
        this.requestParam = this.$kt.util.deepCopy(item);
      } else {
        this.requestParam = {
          bodyJson: [],
          detailJson: [],
          params: [],
          attrs: [],
          attrGroups: [],
          isHasAttr: false,
          "bodyJsonStr": null,
          "costPrice": null,
          "detailJsonStr": null,
          "fileIdOfMain": null,
          "gmtCreate": null,
          "gmtModified": null,
          "id": null,
          "isRecommend": null,
          "name": null,
          "price": null,
          "priority": null,
          salesVolumeShowNumber: null,
          stockNumber: null,
          "typeId": null
        }
      }
      this.getTextsByGoodsId();
      this.show = true;
      setTimeout(()=>{
        this.isInit = true;
      },200);
    },
    getTextsByGoodsId(){

      // /shop-goods-web/text
      this.$kt.request.send({
        uri: "/business-shop-web/shopGoodsText/getByGoodsId",
        data: {
          goodsId: this.requestParam.id
        },
        stateSuccess: (res) => {
          this.texts = res.data;
          this.loading = false;
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
          this.loading = false;
        }
      });
    }
  }
}

</script>

<template>
  <el-dialog
      title="参数国际化"
      width="800px"
      v-model="show">
    <el-scrollbar style="height: calc(100vh - 150px);width:100%">
      <div
          v-for="(item,index) in texts"
      >
        <box-in-i18n-text-dialog
            :param="item"
        ></box-in-i18n-text-dialog>
      </div>
    </el-scrollbar>

  </el-dialog>

</template>

<style scoped lang="scss">
.in-json-box {
  display: inline-block;
  width: 130px;
  height: 100px;
  text-align: center;
  border: 1px solid #ebeef5;
  margin: 10px;
  border-radius: 10px;
  cursor: pointer;

  .move {
    display: flex;
    justify-content: space-between;
    padding: 5px;
  }
}

.table {
  width: 100%;
  border-collapse: collapse;

  tr {
    border: 1px solid #ebeef5;

    td {
      padding: 10px;
      border-right: 1px solid #ebeef5;
    }
  }
}

.tag-btn {
  display: inline-block;
  padding: 0 5px 0 5px;
  margin-right: 10px;
  border: 1px solid #ebeef5;
  cursor: pointer;
  border-radius: 10px;
}

.tag-btn:hover {
  transform: scale(1.05);
}

.tag-btn:active {
  transform: scale(1);
}

</style>